import React,{ Component } from 'react'
import { LegionsProDragger } from 'legions-pro-design';
import {
    Button,
    Steps,
    Row,
    Col,
    Spin,
    Icon,
    Card,
    Tabs,
    Input,
    Checkbox,
    Select,
    Radio,
    DatePicker,
    Table,
    Collapse,
    message
} from 'antd';
const { Panel } = Collapse;


const FormElementICon = (props: IProps) => {
    const basicComponent = [
        { name: 'text',icon: 'edit',text: '单行文本' },
        /* { name: 'textArea',icon: 'edit',text: '多行文本' }, */
        /* { name: 'checkBox',icon: 'edit',text: '复选框' }, */
        { name: 'select',icon: 'edit',text: '下拉选项' },
        { name: 'radioButton',icon: 'edit',text: '单选按钮' },
        { name: 'radio',icon: 'edit',text: '单选' },
        { name: 'switch',icon: 'edit',text: '开关' },
        { name: 'upload',icon: 'edit',text: '上传' },
        { name: 'date',icon: 'edit',text: '日期组件' },
        { name: 'daterange',icon: 'edit',text: '日期区间' },
    ]
    return (
        <Collapse defaultActiveKey={['1']}>
            <Panel header="表单项" key="1">
                <LegionsProDragger
                    dragger-id="formElement"
                    style={{ width: '100%',minHeight: '100px' }}
                    options={{
                        animation: 150,
                        group: {
                            name: 'formElement',
                            pull: true,
                            put: true,

                        },
                        sort: false,
                        dataIdAttr: 'formElement',
                    }}
                    onChange={(items: string[]) => {
                    }}
                >
                    {basicComponent.map((item) => {
                        return (
                            <Col span={12} style={{ marginBottom: '15px',display: 'table' }} data-id={item.name} key={item.name}>
                                <Button type={'dashed'} onClick={props.onClickAddFormElement.bind(void 0,item.name)} style={{ width: '98%',height: '35px',paddingLeft: '2px',paddingRight: '2px' }}>
                                    <span style={{ display: 'block',whiteSpace: 'normal' }}>
                                        {item.text}
                                    </span>
                                </Button>

                            </Col>
                        )
                    })}
                </LegionsProDragger>
            </Panel>

        </Collapse>
    )
}
interface IProps {
    onClickAddFormElement: (type: string) => void
}

export default FormElementICon